import "./index.css"
import "../../style/index.css"
import * as echarts from "echarts"
export default {
    template: `
       <div class="piePageBox wh-100">
            <div class="pie flex-1"> 
                <div class="pie-1 center"> 饼图:同名数据统计</div>
                <div class="pie-2 wh-100"> </div>
            </div>
            <div class="gauge flex-1">
                <div class="gauge-1 center"> 仪表盘</div>
                <div class="gauge-2 wh-100"> </div>
            </div>
        </div>
     `,
    drawPie1: null,
    drawGauge1: null,

    drawPie() {
        const chartDom = document.querySelector(
            ".pie .pie-2"
        );

        const myChart = echarts.init(chartDom);
        const data = genData(50);
        const option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: data.legendData
            },
            series: [
                {
                    name: '姓名',
                    type: 'pie',
                    radius: '55%',
                    center: ['40%', '50%'],
                    data: data.seriesData,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        function genData(count) {
            // prettier-ignore
            const nameList = [
                '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
            ];
            const legendData = [];
            const seriesData = [];
            for (var i = 0; i < count; i++) {
                var name =
                    Math.random() > 0.65
                        ? makeWord(4, 1) + '·' + makeWord(3, 0)
                        : makeWord(2, 1);
                legendData.push(name);
                seriesData.push({
                    name: name,
                    value: Math.round(Math.random() * 100000)
                });
            }
            return {
                legendData: legendData,
                seriesData: seriesData
            };
            function makeWord(max, min) {
                const nameLen = Math.ceil(Math.random() * max + min);
                const name = [];
                for (var i = 0; i < nameLen; i++) {
                    name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
                }
                return name.join('');
            }
        }


        myChart.setOption(option);
    },
    drawGauge() {
        const chartDom = document.querySelector('.gauge .gauge-2');
        this.drawGauge1 = echarts.init(chartDom);
        const option = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            series: [
                {
                    name: 'Pressure',
                    type: 'gauge',
                    progress: {
                        show: true
                    },
                    detail: {
                        valueAnimation: true,
                        formatter: '{value}'
                    },
                    data: [
                        {
                            value: 50,
                            name: 'SCORE'
                        }
                    ]
                }
            ]
        };

        this.drawGauge1.setOption(option);


    },

    mounted() {
        this.drawPie();
        this.drawGauge();
    },

    destroyed() {
        this.drawPie1.dispose();
        this.drawGauge1.dispose();
    }

}